<template>
  <div class="ku-gou" id="ku-gou">
    <ku-gou-header :content="currentContent" @content="handleContent" />
    <div class="ku-gou-content">
      <keep-alive>
        <ku-gou-music v-if="currentContent === 'music'" />
        <ku-gou-theme v-else-if="currentContent === 'theme'" :theme="theme" @change-theme="handleChangeTheme" />
      </keep-alive>
    </div>
    <ku-gou-player
      :active="playStationShow"
      :play-data="currentPlayer"
      @play-end="handleChangeAudio('next')"
      @click="handleShowPlayStation"
      @change-audio="handleChangeAudio"
      @time-update="currentPlayer.currentDuration = $event"
    />
    <transition name="to-top">
      <ku-gou-play-station v-if="playStationShow" :play-data="currentPlayer" />
    </transition>
  </div>
</template>

<script setup lang="ts">
import KuGouHeader from '@/components/systemWindow/kuGou/kuGouHeader.vue'
import KuGouMusic from '@/components/systemWindow/kuGou/kuGouMusic.vue'
import KuGouTheme from '@/components/systemWindow/kuGou/kuGouTheme.vue'
import KuGouPlayer from '@/components/systemWindow/kuGou/kuGouPlayer.vue'
import KuGouPlayStation from '@/components/systemWindow/kuGou/kuGouPlayStation.vue'
import GuYongZheLyrics from '@/assets/audio/gu-yong-zhe'
import XiaoChou from '@/assets/audio/xiao-chou'
import QiFengLe from '@/assets/audio/qi-feng-le'
import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useSystemSettingStore } from '@/stores/desk/systemSetting'
import { trayMitt } from '@/utils/utils'

export interface IPlayer {
  currentDuration: number
  name: string
  singer: string
  singerImage: string[]
  lyrics: string
  avatar: string
  audio: string
}

// 播放列表
const playList = [
  {
    currentDuration: 0,
    name: '孤勇者',
    singer: '陈奕迅',
    lyrics: GuYongZheLyrics,
    avatar: new URL('@/assets/images/kuGou/gu-yong-zhe.jpg', import.meta.url).href,
    audio: new URL('@/assets/audio/gu-yong-zhe.mp3', import.meta.url).href,
    singerImage: [
      new URL('@/assets/images/kuGou/chen-yi-xun01.jpg', import.meta.url).href,
      new URL('@/assets/images/kuGou/chen-yi-xun02.jpg', import.meta.url).href,
      new URL('@/assets/images/kuGou/chen-yi-xun03.jpg', import.meta.url).href,
      new URL('@/assets/images/kuGou/chen-yi-xun04.jpg', import.meta.url).href,
      new URL('@/assets/images/kuGou/chen-yi-xun05.jpg', import.meta.url).href
    ]
  },
  {
    currentDuration: 0,
    name: '消愁',
    singer: '毛不易',
    lyrics: XiaoChou,
    avatar: new URL('@/assets/images/kuGou/xiao-chou.jpg', import.meta.url).href,
    audio: new URL('@/assets/audio/xiao-chou.mp3', import.meta.url).href,
    singerImage: [
      new URL('@/assets/images/kuGou/mao-bu-yi01.jpg', import.meta.url).href,
      new URL('@/assets/images/kuGou/mao-bu-yi02.png', import.meta.url).href,
      new URL('@/assets/images/kuGou/mao-bu-yi03.png', import.meta.url).href,
      new URL('@/assets/images/kuGou/mao-bu-yi04.png', import.meta.url).href
    ]
  },
  {
    currentDuration: 0,
    name: '起风了',
    singer: '吴青峰',
    lyrics: QiFengLe,
    avatar: new URL('@/assets/images/kuGou/qi-feng-le.jpg', import.meta.url).href,
    audio: new URL('@/assets/audio/qi-feng-le.mp3', import.meta.url).href,
    singerImage: [
      new URL('@/assets/images/kuGou/wu-qing-feng01.png', import.meta.url).href,
      new URL('@/assets/images/kuGou/wu-qing-feng02.jpeg', import.meta.url).href,
      new URL('@/assets/images/kuGou/wu-qing-feng03.jpeg', import.meta.url).href,
      new URL('@/assets/images/kuGou/wu-qing-feng04.jpeg', import.meta.url).href
    ]
  }
]

const appId = inject<string>('appId') || ''
const taskId = inject<string>('taskId') || ''
const componentData = inject<{ [key: string]: unknown }>('componentData')

const runningTasksStore = useRunningTasksStore()
const systemSettingStore = useSystemSettingStore()

// 当前页面状态 音乐播放页  切换皮肤页
const currentContent = ref<string>((componentData?.currentContent as string) || 'music')
// 主题
const theme = ref<string>((componentData?.theme as string) || 'light')
// 是否显示播放器页面
const playStationShow = ref<boolean>(!!componentData?.playStationShow)
// 当前播放歌曲索引
const currentPlayerIndex = ref<number>((componentData?.currentPlayerIndex as number) || 0)
// 当前播放歌曲数据
const currentPlayer = ref<IPlayer>(playList[currentPlayerIndex.value])

// 切换音乐
const handleChangeAudio = (type: 'perv' | 'next') => {
  if (type === 'perv') currentPlayerIndex.value--
  if (type === 'next') currentPlayerIndex.value++
  if (currentPlayerIndex.value > playList.length - 1) currentPlayerIndex.value = 0
  if (currentPlayerIndex.value < 0) currentPlayerIndex.value = playList.length - 1
  currentPlayer.value = playList[currentPlayerIndex.value]
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      currentPlayerIndex: currentPlayerIndex.value
    }
  })
}

// 切换内容
const handleContent = (content: string) => {
  currentContent.value = content
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      currentContent: content
    }
  })
}

// 切换主题皮肤
const handleChangeTheme = (themes: string) => {
  const kuGou = document.querySelector('#ku-gou') as HTMLElement
  kuGou.dataset.theme = themes
  theme.value = themes
  if (themes === 'system') kuGou.dataset.theme = systemSettingStore.$state.deskTheme
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      theme: themes
    }
  })
}

// 显示播放器页面
const handleShowPlayStation = () => {
  playStationShow.value = !playStationShow.value
  runningTasksStore.setTaskPatch(appId, taskId, {
    componentData: {
      playStationShow: playStationShow.value
    }
  })
}

trayMitt.on('trayClick', (data) => {
  if (appId === data.appId && taskId === data.taskId) {
    runningTasksStore.setTaskToMin(appId, taskId, false)
    runningTasksStore.checkedCurrentTask(appId, taskId)
  }
})

const init = () => {
  const find = runningTasksStore.findTask(appId, taskId)
  if (find) {
    const isSystem = find.componentData?.theme === 'system'
    const theme = find.componentData?.theme as string
    const keGou = document.querySelector('#ku-gou') as HTMLElement
    keGou.dataset.theme = isSystem ? systemSettingStore.$state.deskTheme : theme || 'light'
  }
}

watch(() => systemSettingStore.$state.deskTheme, init)

onBeforeUnmount(() => {
  trayMitt.off('trayClick')
})

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.ku-gou[data-theme='light'] {
  --theme-bg: #fff;
  --font-color: rgb(173, 173, 173);
  --font-checked-color: rgb(51, 51, 51);
  --search-bg: rgb(231, 231, 231);
  --hover-color: rgb(83, 146, 255);
  --nav-list-checked: rgb(227, 227, 227);
  --play-color: rgb(47, 174, 230);
  --play-bg: rgb(224, 224, 224);
  --voice-bg: rgb(235, 235, 235);
  --voice-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  --voice-wrapper-bg: rgb(255, 255, 255);
}

.ku-gou[data-theme='dark'] {
  --theme-bg: linear-gradient(90deg, rgb(56, 56, 56), rgb(0, 0, 0) 80%, rgb(21, 21, 21));
  --font-color: rgb(109, 109, 109);
  --font-checked-color: rgb(255, 255, 255);
  --search-bg: rgb(75, 75, 75);
  --hover-color: rgb(83, 146, 255);
  --nav-list-checked: rgb(110, 110, 110);
  --play-color: rgb(81, 146, 254);
  --play-bg: rgb(104, 104, 104);
  --voice-bg: rgb(79, 79, 79);
  --voice-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  --voice-wrapper-bg: rgb(35, 35, 35);
}

.ku-gou {
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s;
  background: var(--theme-bg);
  position: relative;

  .ku-gou-content {
    padding-top: 14px;
    box-sizing: border-box;
    height: calc(100% - 80px - 70px);
  }
}
</style>
